import React from 'react';
import { Card, Image } from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { imgFallback } from '@/const.js';

const ListItem = ({ item, provided, handleDelete, handleEdit }) => (
    <div
        ref={provided.innerRef}
        {...provided.draggableProps}
        {...provided.dragHandleProps}
    >
        <div style={{ padding: '24px 24px 24px 0' }}>
            <Card
                hoverable
                style={{ width: 240 }}
                cover={<Image width={240} height={300} alt="example" src={item.img} fallback={imgFallback} />}
                actions={[
                    <EditOutlined style={{ color: '#1677ff' }} onClick={() => handleEdit(item)} />,
                    <DeleteOutlined style={{ color: 'red' }} onClick={() => handleDelete(item.id)} />,
                ]}
            >
                <Card.Meta title={item.title} description={item.subTitle} />
            </Card>

        </div>
    </div>
);

export default ListItem;
